<template>
    <transition name="dialog-fade" @after-enter="afterEnter" @after-leave="afterLeave">
        <div v-show="show" class="el-dialog__wrapper" style="z-index:1000" @click.self="handleWrapperClick">
            <div role="dialog" :key="key" aria-modal="true" :aria-label="title || 'dialog'" :class="['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]" ref="dialog" :style="style">
                <div class="el-dialog__header">
                    <slot name="title">
                        <span class="el-dialog__title">{{ title }}</span>
                    </slot>
                    <button type="button" class="el-dialog__headerbtn" aria-label="Close" v-if="showClose" @click="handleClose">
                        <i class="el-dialog__close el-icon el-icon-close"></i>
                    </button>
                </div>
                <div class="el-dialog__body">
                    <div id="video-container"></div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
import EZUIKit from 'ezuikit-js';
import Popup from 'element-ui/src/utils/popup';
import Migrating from 'element-ui/src/mixins/migrating';
import emitter from 'element-ui/src/mixins/emitter';
// import dropDialog from "@/utils/pop"
export default {
    mixins: [Popup, emitter, Migrating],
    data() {
        return {
            playr: null,
            show: false,
            closed: false,
            key: 0
        }
    },
    props: {
        width: {
            default: 800
        },
        height: {
            default: 500
        },
        title: {
            type: String,
            default: ''
        },

        modal: {
            type: Boolean,
            default: true
        },

        modalAppendToBody: {
            type: Boolean,
            default: true
        },

        appendToBody: {
            type: Boolean,
            default: false
        },

        lockScroll: {
            type: Boolean,
            default: true
        },

        closeOnClickModal: {
            type: Boolean,
            default: true
        },

        closeOnPressEscape: {
            type: Boolean,
            default: true
        },

        showClose: {
            type: Boolean,
            default: true
        },
        fullscreen: Boolean,
        customClass: {
            type: String,
            default: ''
        },
        top: {
            type: String,
            default: '15vh'
        },
        beforeClose: Function,
        center: {
            type: Boolean,
            default: false
        },

        destroyOnClose: Boolean
    },
    watch: {
        show(val) {
            if (val) {
                this.closed = false;
                this.$emit('open');
                this.$el.addEventListener('scroll', this.updatePopper);
                this.$nextTick(() => {
                    this.$refs.dialog.scrollTop = 0;
                });
                if (this.appendToBody) {
                    document.body.appendChild(this.$el);
                }
            } else {
                this.$el.removeEventListener('scroll', this.updatePopper);
                if (!this.closed) this.$emit('close');
                if (this.destroyOnClose) {
                    this.$nextTick(() => {
                        this.key++;
                    });
                }
            }
        }
    },
    computed: {
        style() {
            let style = {};
            if (!this.fullscreen) {
                style.marginTop = this.top;
                if (this.width) {
                    style.width = this.width;
                }
            }
            return style;
        }
    },
    created() {

    },
    methods: {
        /**
         * verificationCode  验证码
         * serialNumber 设备序列号 
         */
        init(verificationCode, serialNumber, apiUrl = 'https://open.ys7.com/api/lapp/token/get') {
            let that = this;
            var data = new FormData();
            data.append("appKey", '7bf0e7bc5371454ab6604ff66c601a52');
            data.append("appSecret", "bdb01a514e50f150408a49f95fcfa6c0");
            fetch(apiUrl, { method: "POST", body: data })
                .then(response => response.json())
                .then(res => {
                    var accessToken = res.data.accessToken;
                    that.playr = new EZUIKit.EZUIKitPlayer({
                        id: 'video-container', // 视频容器ID
                        accessToken: accessToken,
                        url: `ezopen://${verificationCode}@open.ys7.com/${serialNumber}/1.live`,
                        template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题;mobileLive-手机版带云台
                        plugin: ['talk'],                       // 加载插件，talk-对讲
                        width: that.width - 50,
                        height: that.height,
                    });
                });
        },
        getMigratingConfig() {
            return {
                props: {
                    'size': 'size is removed.'
                }
            };
        },
        handleWrapperClick() {
            if (!this.closeOnClickModal) return;
            this.handleClose();
        },
        handleClose() {
            if (typeof this.beforeClose === 'function') {
                this.beforeClose(this.hide);
            } else {
                this.hide();
            }
        },
        hide(cancel) {
            if (cancel !== false) {
                this.$emit('update:show', false);
                this.$emit('close');
                this.closed = true;
                this.show=false;
            }
        },
        updatePopper() {
            this.broadcast('ElSelectDropdown', 'updatePopper');
            this.broadcast('ElDropdownMenu', 'updatePopper');
        },
        afterEnter() {
            this.$emit('opened');
        },
        afterLeave() {
            this.$emit('closed');
        }
    },
    mounted() {
        if (this.show) {
            this.rendered = true;
            this.open();
            if (this.appendToBody) {
                document.body.appendChild(this.$el);
            }
        }
    },

    destroyed() {
        // if appendToBody is true, remove DOM node after destroy
        if (this.appendToBody && this.$el && this.$el.parentNode) {
            this.$el.parentNode.removeChild(this.$el);
        }
    }
}
</script>
<style lang="scss" scoped>
/deep/.el-dialog__wrapper{
    z-index: 1000;
}
/deep/.el-dialog{
    width: fit-content;
}
/deep/.el-dialog__body {
    width: fit-content;
    height: fit-content;
}
</style>